<template>
    <view :style="{ background: integralBg }" class="integral-head-main">
        <view class="integral-container">
            <view class="name">当前积分</view>
            <view class="integral-num">
                <view class="num">{{ props.currentIntegral }}</view>
            </view>
        </view>
        <view @click="openPopup" class="rule">规则说明</view>
        <!-- <view v-if="showRule" @click="showRule = false" class="rule-container-bg">
            <view class="rule-container">
                <view class="title">积分规则说明</view>
                <view class="rule-detail">订单确认收货后，发放积分</view>
            </view>
        </view> -->
        <uni-popup ref="popup" :mask-click="false">
            <view class="pop-view">
                <view class="rule-container">
                    <view class="title">积分规则说明</view>
                    <view class="rule-detail">订单确认收货后，发放积分</view>
                </view>
                <uni-icons @tap="closePopup" class="popup-close" type="close" size="80rpx" color="#fff"></uni-icons>
            </view>
        </uni-popup>
    </view>
    <view class="integral-list" v-if="props.isIntegralMall === 1">
        <view class="integral-line"></view>
        <view class="integral-content" @click="goToRecord">
            <image :src="getImgOssUrl('/ui-prod-2.6.0/icon@2x.png')" class="link-icon"></image>
            <text class="title">积分记录</text>
        </view>
        <view class="integral-content" @click="goToExchange">
            <image :src="getImgOssUrl('/ui-prod-2.6.0/back@2x.png')" class="link-icon"></image>
            <text class="title">兑换记录</text>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import router from '@/router';
import { getImgOssUrl, checkToken } from '@/commons/utils';
const integralBg = ref(`url(${getImgOssUrl('/ui-prod-2.4.0/integral@2x.png')})`);
const emit = defineEmits(['closed', 'open']);
const props = defineProps({
    isIntegralMall: {
        type: Number,
        default: 0
    },
    currentIntegral: {
        type: Number,
        default: 0
    }
});
let popup = ref();
const goToRecord = () => {
    router.push({
        path: '/pages-user/myIntegral/index'
    });
};
const goToExchange = () => {
    router.push({
        path: '/pages-user/myIntegral/recorde',
        query: {
            isopen: true
        }
    });
};
const openPopup = () => {
    popup?.value?.open('center');
    emit('open');
};
const closePopup = () => {
    popup?.value?.close();
    emit('close');
};
</script>
<style lang="scss" scoped>
.integral-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    height: 87rpx;
    background: #ffffff;
    .integral-content {
        display: flex;
        align-items: center;
    }
    .integral-line {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        width: 2rpx;
        height: 33rpx;
        background: #eaeaea;
    }
    .link-icon {
        width: 29rpx;
        height: 29rpx;
        margin-right: 7rpx;
    }
    .title {
        font-size: 29rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 40rpx;
    }
}
.integral-head-main {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 217rpx;
    background-size: 100% 100% !important;
    .pop-view {
        position: relative;
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        box-sizing: border-box;
        width: 640rpx;
        height: 290rpx;
        border-radius: 16rpx;
        background: #ffffff;
        padding: 43rpx 0 49rpx 0;

        .rule-container {
            .title {
                font-size: 29rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 29rpx;
                margin-bottom: 33rpx;
                text-align: center;
            }
            .rule-detail {
                font-size: 25rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                text-align: center;
            }
        }
        .popup-close {
            position: absolute;
            bottom: -128rpx;
            left: 50%;

            transform: translateX(-50%);

            color: #ffffff;
        }
    }
    .integral-container {
        width: 100%;
        padding: 0 29rpx 0 54rpx;
        .name {
            font-size: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 25rpx;
            margin-bottom: 29rpx;
        }
        .integral-num {
            display: flex;
            justify-content: space-between;
            .num {
                font-size: 51rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 36rpx;
            }
            .integral-record {
                display: flex;
                align-items: center;
                font-size: 25rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
            }
        }
    }
    .rule {
        position: absolute;
        right: 0;
        top: 29rpx;
        width: 118rpx;
        height: 43rpx;
        line-height: 43rpx;
        background: #ea282a;
        border-radius: 27rpx 0 0 27rpx;
        border: 2rpx solid rgba(255, 255, 255, 0.47);
        text-align: center;
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
    }
}
</style>
